<template>
	<view class="home">
		<view class="background">
		</view>

		<view class="image-container">
			<image src="../../static/dcr.png" mode="" class="image"></image>
		</view>
		<view class="white-box1">
			<view>
				<text class="msg">  
				位于四川省成都市郫都区德源镇东林艺术村，是全国唯一经袁隆平院士授权以其名字命名的园区。
				全国首批科学家精神教育基地，园区以袁隆平院士为精神支柱，以稻蒜文化为基础，将科研场景
				变成教学场景，建立劳动教育、农业科普教育基地及成人实训基地。
					
				</text>
			</view>

		</view>
		<view class="white-box2">
			<image src="../../static/yy1.png" mode="" class="image1"></image>
			<view class="text-container" @click="toPersonal">
				<text class="text-bold">个人预约</text>
				<text class="text-light">Personal reservation</text>
			</view>

		</view>
		<view class="white-box3">
			<image src="../../static/yy2.png" mode="" class="image2"></image>
			<view class="text-container" @click="toGroup">
				<text class="text-bold">团体预约</text>
				<text class="text-light">Group reservation</text>
			</view>

		</view>
		<view class="white-box4">
			<image src="../../static/yy3.png" mode="" class="image3"></image>
			<view class="text-container" @click="toScan">
				<text class="text-bold">扫描入园</text>
				<text class="text-light">Scan the QR code to enter the park</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	let toPersonal = function() {
		uni.redirectTo({
			url: '/pages/instructions/instructions'
		});
		uni.showToast({
			title: '3秒后跳转到个人预约',
			icon: 'none',
			duration: 3000
		});
		setTimeout(function() {
			uni.navigateTo({
				url: '/pages/service/service1'
			});
		}, 3000);
	};

	let toGroup = function() {
		uni.redirectTo({
			url: '/pages/instructions/instructions'
		});
		uni.showToast({
			title: '3秒后跳转到团队预约',
			icon: 'none',
			duration: 3000
		});
		setTimeout(function() {
			uni.navigateTo({
				url: '/pages/service/service2'
			});
		}, 3000);
	};

	let toScan = function() {
		uni.redirectTo({
			url: '/pages/instructions/instructions'
		});
		uni.showToast({
			title: '3秒后跳转到扫描入园',
			icon: 'none',
			duration: 3000
		});
		setTimeout(function() {
			uni.navigateTo({
				url: '/pages/service/service'
			});
		}, 3000);
	};
</script>

<style>
	.home {
		padding: 12px;
	}

	.background {
		width: 100%;
		height: 700px;
		border-radius: 12px;
		background-image: url('../../static/bg.png');
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.image-container {
		position: absolute;
		left: 42px;
		top: 280px;
		z-index: 2;
	}

	.image {
		width: 71px;
		height: 100px;

	}

	.msg {
		position: relative;
		width: 100%;
		max-width: 259px;
		font-weight: 400;
		font-size: 12px;
		color: #05261B;
		letter-spacing: 0;
		line-height: 22px;
		text-align: center;
		

	}

	.white-box1 {
		position: absolute;
		left: 30px;
		top: 130px;
		width: 85%;
		height: 180px;
		background: #FFFFFF;
		border-radius: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;

		box-sizing: border-box;
		z-index: 1;
	}

	.white-box2,
	.white-box3,
	.white-box4 {
		position: absolute;
		left: 30px;
		background: #FFFFFF;
		border-radius: 12px;
		display: flex;
		align-items: center;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.white-box2 {
		top: 360px;
		width: 85%;
		height: 70px;
	}

	.white-box3 {
		top: 442px;
		width: 85%;
		height: 70px;
	}

	.white-box4 {
		top: 524px;
		width: 85%;
		height: 70px;
	}

	.image1,
	.image2,
	.image3 {
		width: 32px;
		height: 32px;
		margin-right: 10px;
		/* 图片和白色区域的内容之间的间距 */

	}

	.text-bold {
		width: 61.48px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #05261B;
		letter-spacing: 0;
		margin-bottom: -30px;
		font-weight: 700;

	}

	.text-light {
		width: 100%;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
		margin-top: 35px;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* 左对齐 */
		flex: 1;
		width: calc(100% - 42px);
		/* 计算宽度以适应图片 */
	}
</style>